<template>
    <div class="seekersInfo">
        <h1 style="color:rgb(51, 51, 218);margin-left:-100px">{{ resumeForm.resume_name }}</h1>
        <el-form :model="seekersForm" label-width="80px" size="medium" style="margin-left:300px">
            <el-form-item label="姓名" style="width:600px">
                <el-input v-model="seekersForm.full_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="性别" style="width:600px">
                <el-input v-model="seekersForm.gender" disabled></el-input>
            </el-form-item>
            <el-form-item label="年龄" style="width:600px">
                <el-input v-model="seekersForm.age" disabled></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" style="width:600px">
                <el-input v-model="seekersForm.university_one_is_graduated_from" disabled></el-input>
            </el-form-item>
            <el-form-item label="毕业年度" style="width:600px">
                <el-input v-model="seekersForm.graduation_year" disabled></el-input>
            </el-form-item>
            <el-form-item label="学历" style="width:600px">
                <el-input v-model="seekersForm.education" disabled></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="resumeForm" style="margin-left:300px">
            <el-form-item label="个人优势" style="width:600px">
                <el-input v-model="resumeForm.personal_advantages" :disabled="ableToInput"></el-input>
            </el-form-item>
            <el-form-item label="工作经历" style="width:600px">
                <el-input v-model="resumeForm.work_experience" :disabled="ableToInput"></el-input>
            </el-form-item>
            <el-form-item label="项目经历" style="width:600px">
                <el-input v-model="resumeForm.project_experience" :disabled="ableToInput"></el-input>
            </el-form-item>
        </el-form>
        <div style="margin-left:-250px">
            <el-button @click="toUpdateResumeInfo" v-show="!isUpdateResumeInfo">修改</el-button>
            <el-button @click="doUpdateResumeInfo" v-show="isUpdateResumeInfo">提交修改</el-button>
            <el-button @click="doNotUpdateResumeInfo" v-show="isUpdateResumeInfo">返回</el-button><br><br>
        </div>
        <div class="resumeUpAndDownload" style="margin-left:-350px">
            <span style="color:red" v-show="isResumeAttachmentNull">您还没有上传简历附件&emsp;</span>
            <span style="color:red" v-show="!isResumeAttachmentNull">简历附件:{{ resumeFileName
            }}</span>&emsp;
            <el-button type="primary" @click="uploadResume">点击上传简历附件</el-button>
            <el-button type="primary" @click="downloadResume" v-show="!isResumeAttachmentNull">下载简历附件</el-button>
        </div>

        <div class="group-botton" v-show="isUploadResume" style="margin-top:10px;margin-left:-250px">
            <el-upload class="upload-demo" drag action="http://127.0.0.1:5000/api/user/upload" show-file-list
                accept=".doc,.docx" :before-upload="beforeUpload" ref="upload" :file-list="fileList" :auto-upload="false"
                :on-change="changeHander" :headers="headers" :on-success="handleResumeSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或点击上传</div>
                <div class="el-upload__tip uploadeMax">支持上传后缀为：.doc、.docx文件,且不超过20M</div>
            </el-upload>
            <el-button plain @click="submitUpload">提交</el-button>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            resumeFileName: '',
            isResumeAttachmentNull: true,
            ableToInput: true,
            isUpdateResumeInfo: false,
            headers: {
                'X-Auth-Token': window.localStorage.getItem("token")
            },
            isUploadResume: false,
            fileName: '',
            fileList: [],
            resumeForm: {
                resume_management_id: '',
                personal_advantages: '',
                work_experience: '',
                project_experience: '',
                resume_attachment: '',
                resume_name: '',
                resume_management_id: '',
                user_id: window.localStorage.getItem("user_id"),
            },
            seekersForm: {
                job_seekers_id: '',
                full_name: '',
                gender: '',
                age: '',
                university_one_is_graduated_from: '',
                graduation_year: '',
                education: '',
                user_id: window.localStorage.getItem("user_id"),
            }
        };
    },
    methods: {
        downloadResume() {
            let resumeFileName = this.resumeForm.resume_attachment.split('/');
            window.open('http://127.0.0.1:5000/api/upload/resume/' + resumeFileName[2]);
        },
        doUpdateResumeInfo() {
            let that = this;
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/resume_management/set?resume_management_id=' + that.resumeForm.resume_management_id,
                data: {
                    personal_advantages: that.resumeForm.personal_advantages,
                    work_experience: that.resumeForm.work_experience,
                    project_experience: that.resumeForm.project_experience,
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    window.location.reload();
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        doNotUpdateResumeInfo() {
            window.location.reload();
        },
        toUpdateResumeInfo() {
            this.isUpdateResumeInfo = true;
            this.ableToInput = false;
        },
        uploadResume() {
            this.isUploadResume = true;
        },
        changeHander(file, fileList) {
            this.fileName = file.name;
        },
        handleResumeSuccess() {
            this.$message.success("上传成功!");
            this.setResumeAttachmentUrl();
            window.location.reload();
        },
        setResumeAttachmentUrl() {
            console.log("设置简历URL");
            let that = this;
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/resume_management/set?resume_management_id=' + that.resumeForm.resume_management_id,
                data: {
                    resume_attachment: '/resume/' + that.fileName,
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        beforeUpload(file) {

            console.log(file);

            // 文件类型校验

            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

            const extension = testmsg === "doc" || testmsg === "docx";

            if (!extension) {

                this.$message({

                    message: "上传文件只能是.doc 或 .docx格式!",

                    type: "warning",

                });

                // 文件大小校验

                let size20M = file.size / 1024 / 1024 < 20

                if (!size20M) {

                    this.$message.warning('上传大小不能超过20M!')

                    return false

                }
            }
            return extension;
        },

        // 点击提交按钮文件上传

        submitUpload() {
            this.$refs.upload.submit();
        },
    },
    //获取简历信息
    beforeMount: function () {
        let that = this;
        //防止刷新时跳转到其它位置
        let id = that.$route.params.resume_management_id;
        if (!that.$route.params.resume_management_id) {
            id = window.localStorage.getItem("resume_management_id");
        }
        axios({
            method: 'get',
            url: 'http://127.0.0.1:5000/api/resume_management/get_obj',
            params: {
                resume_management_id: id
            },
        })
            .then(function (response) {
                console.log(that.$route.params.resume_management_id);
                console.log(response.data);
                if (response.data.result != null) {
                    that.resumeForm.resume_management_id = response.data.result.obj.resume_management_id;
                    that.resumeForm.personal_advantages = response.data.result.obj.personal_advantages;
                    that.resumeForm.work_experience = response.data.result.obj.work_experience;
                    that.resumeForm.project_experience = response.data.result.obj.project_experience;
                    that.resumeForm.resume_name = response.data.result.obj.resume_name;
                    that.resumeForm.resume_attachment = response.data.result.obj.resume_attachment;
                    //保存到本地仓库
                    window.localStorage.setItem("resume_management_id", response.data.result.obj.resume_management_id);
                    if (response.data.result.obj.resume_attachment) {
                        that.isResumeAttachmentNull = false;
                        that.resumeFileName = that.resumeForm.resume_attachment.split('/')[2];
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    },
    //获取求职信息
    created: function () {
        if (!window.localStorage.getItem("token")) {
            this.$router.push({ path: '/login' }, () => { }, () => { });
            return;
        }
        let that = this;
        axios({
            method: 'get',
            url: 'http://127.0.0.1:5000/api/job_seekers/get_obj',
            params: {
                user_id: that.seekersForm.user_id,
            },
            headers: {
                'X-Auth-Token': window.localStorage.getItem("token")
            },
        })
            .then(function (response) {
                console.log(response.data);
                if (response.data.result != null) {
                    that.seekersForm.age = response.data.result.obj.age;
                    that.seekersForm.full_name = response.data.result.obj.full_name;
                    that.seekersForm.gender = response.data.result.obj.gender;
                    that.seekersForm.graduation_year = response.data.result.obj.graduation_year;
                    that.seekersForm.education = response.data.result.obj.education;
                    that.seekersForm.university_one_is_graduated_from = response.data.result.obj.university_one_is_graduated_from;
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            });

    },
}
</script>
<style lang="less" scoped>
.seekersInfo {
    margin-top: -400px;
    margin-left: 500px;
}
</style>